<!DOCTYPE html>
<html>

<head>
    <title>商品详情</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <link href="../lib/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../lib/weui-master/dist/style/weui.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../lib/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/photoswipe-3.0.5/3.0.5/photoswipe.css">
    <link rel="stylesheet" type="text/css" href="../sys/css/goodsdetail.css">
    <style type="text/css">
    
    </style>
</head>

<body>
    <div class="box">
        <div class="imgsbox">
            <div class="all">
                <div class="inner">
                    <a v-for="topimg in topimgs" :href="topimg"><img :src="topimg" alt=""></a>
                </div>
                <div class="pointer" id="pointer">
                    <span v-for="topimg in topimgs"></span>
                </div>
            </div>
        </div>
        <div class="title">
            艺福堂玫瑰花茶 花草茶叶 法兰西胎玫瑰花茶包邮 干玫瑰花蕾80g
        </div>
        <div class="price">￥29.8</div>
        <div class="topmenu ">
            <ul>
                <li>图文详情</li>
                <li>产品参数</li>
                <li @click="jumpToGoodslist">店铺推荐</li>
            </ul>
        </div>
        <div class="details">
            <div class="details-img" v-for="detailimg in detailimgs">
                <a :href="detailimg"><img :src="detailimg" alt=""></a>
            </div>
        </div>
        <div class="goodsfoot">
            <ul>
                <li class="goodsfoot-left">客服</li>
                <li class="goodsfoot-left" @click="jumpToShop">店铺</li>
                <li class="goodsfoot-left">收藏</li>
                <li class="goodsfoot-right" style="background-color:#3C548F ;">加入购物车</li>
                <li class="goodsfoot-right" style="background-color: #6074A7;">立即购买</li>
            </ul>
        </div>
    </div>
    <script src="../lib/jquery/jquery-1.11.0.min.js"></script>
    <script src="../lib/vue/vue.js"></script>
    <script src="../lib/flipsnap.min.js"></script>
    <script src="../data/shop.json"></script>
    <script type="text/javascript" src="../lib/photoswipe-3.0.5/3.0.5/lib/klass.min.js"></script>
    <script type="text/javascript" src="../lib/photoswipe-3.0.5/3.0.5/code.photoswipe.jquery-3.0.5.min.js"></script>
    <script>
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    var imgsboxWidth = $(".imgsbox").width();
    var boxWidth = $(".box").width();

    $(".inner").css("width", imgsboxWidth * 8);
    $(".inner>a").css("width", imgsboxWidth);
    $(".all").css("width", imgsboxWidth);



    $(window).load(function() {
        $(".pointer span:nth-child(1)").addClass('color');

        var $pointer = $('.pointer span');
        var flipsnap = Flipsnap('.inner', {
            distance: imgsboxWidth
        });
        flipsnap.element.addEventListener('fsmoveend', function() {
            $pointer.filter('.color').removeClass('color'); //filter 为jquery的筛选器，筛选出与指定表达式匹配的元素集合  
            $pointer.eq(flipsnap.currentPoint).addClass('color');
        }, false);



        //图片播放器插件
        (function(window, $, PhotoSwipe) {

            $(document).ready(function() {

                var options = {};
                $(".inner a").photoSwipe(options);
                //如果有两组照片就如下再弄下
                // var options2 = {};
                // $(".details-img a").photoSwipe(options2);

            });


        }(window, window.jQuery, window.Code.PhotoSwipe));



    });




    $(function() {

        $(window).scroll(function() {
            if ($(this).scrollTop() > 220) {
                $('.topmenu').addClass('topfixed');
               
            } else {
                $('.topmenu').removeClass('topfixed');
            
            }
        });

        var box = new Vue({
            el: '.box',
            data: goodsdata,

            methods: {
                jumpToShop:function(){
                    window.location.href="shop.html"
                },
                jumpToGoodslist:function(){
                    window.location.href="goodslist.html"
                }

            }
        })



    })
    </script>
</body>

</html>
